<template>
  <MainSlot v-loading="loading">
    <template v-slot:searchForm>
      <SearchForm :formItemList="formItemList" @search="search"></SearchForm>
    </template>
    <template v-slot:table>
      <TableData :tableThead="tableThead" :dataList="dataList" :loading="loading">
        <template v-slot:lotNumber="{ row }">
          <span>{{ row.batchFile ? row.batchFile.lotNumber || '--' : '--' }}</span>
        </template>
        <template v-slot:orderNo="{ row }">
          <span>{{ row.orderNo || '--' }}</span>
        </template>
        <template v-slot:materialName="{ row }">
          <span>{{ row.material ? row.material.materialName || '--' : '--' }}</span>
        </template>
        <template v-slot:variation="{ row }">
          <span>{{ row.variation || 0 }}{{ row.castUnit.unitName || '' }}</span>
        </template>
        <template v-slot:onHandQuantity="{ row }">
          <span>{{ row.onHandQuantity || 0 }}{{ row.castUnit.unitName || '' }}</span>
        </template>
      </TableData>
    </template>
    <template v-slot:pagination>
      <Pagination @size-Change="handleSizeChange" :size="size" @current-change="handleCurrentChange" :page="page"
        :total="total">
      </Pagination>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import Pagination from '@/components/Pagination';
import digtalOperation from '@/api/digtalOperation/inventoryChanges'
export default {
  components: { MainSlot, SearchForm, TableData, Pagination },
  data() {
    return {
      loading: false,
      formData: {},
      searchFormData: {},
      page: 1,
      size: 10,
      total: 10,
      dataList: [],
      tableThead: [
        { isShow: true, label: '单据类型', prop: 'orderType', minWidth: '120px' },
        { isShow: true, label: '单据号', slotName: 'orderNo', minWidth: '120px' },
        { isShow: true, label: '行号', prop: 'batchNo', minWidth: '120px' },
        { isShow: true, label: '批号', slotName: 'lotNumber', minWidth: '120px' },
        { isShow: true, label: '物料', slotName: 'materialName', minWidth: '120px' },
        { isShow: true, label: '变化量', slotName: 'variation', minWidth: '120px' },
        { isShow: true, label: '主数量', slotName: 'onHandQuantity', minWidth: '120px' },
        { isShow: true, label: '换算率', prop: 'vchangerate', minWidth: '120px' }
      ],
      formItemList: [
        {
          label: '单据类型',
          type: 'select',
          selectOptions: [
            { text: '出库', value: '出库' },
            { text: '入库', value: '入库' },
            { text: '盘盈', value: '盘盈' },
            { text: '盘亏', value: '盘亏' },
          ],
          param: 'orderType',
          defaultSelect: '',
          multiple: false,
          isShow: true
        },
        {
          label: '单据号',
          type: 'input',
          param: 'orderNo',
          isShow: true
        },
        {
          label: '行号',
          type: 'input',
          param: 'batchNo',
          isShow: true
        }
      ]
    }
  },
  mounted() {
    this.queryPageByCondition()
  },
  methods: {
    search(data) {
      console.log(data)
      this.page = 1;
      this.searchFormData = { ...data }
      this.queryPageByCondition()
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryPageByCondition();
    },
    queryPageByCondition() {
      let params = {
        page: this.page,
        size: this.size,
        entity: { ...this.searchFormData }
      }
      digtalOperation.queryPageByCondition(params).then(res => {
        console.log(res)
        let { data } = res
        this.dataList = data.content || [];
        this.total = data.totalElements;
      }).catch(err => {

      })
    }
  }
};
</script>
<style lang="scss" scoped>
.tag {
  margin: 5px 10px;
  cursor: pointer;
}
</style>